<template>
  <div>
    <h3 class="title">{{ title }}</h3>
    <p class="info">
      <span>发表时间：{{ time | dateFormat("YYYY-MM-DD") }}</span
      >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <span>点击：{{ count }}</span>
    </p>
    <hr />
    <p class="image">
      <img :src="content" alt="" />
      <comment></comment>
    </p>
  </div>
</template>

<script>
import one from "../../images/news-info/1.png";

import comment from "../sub-components/comment.vue";

export default {
  data() {
    return {
      title: "一只可爱的小猫正在沉睡",
      time: new Date(),
      count: "10次",
      content: one,
    };
  },
  props: ["id"],
  components: {
    comment: comment,
  },
};
</script>

<style scoped>
.title {
  margin: 15px;
  font-size: 18px;
  color: deeppink;
  text-align: center;
}
.info {
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
}
.image {
  margin-top: 15px;
}
</style>